টুলটিপের অবস্থান নির্ধারণ

ডানদিকে টুলটিপ

এই উদাহরণে, আমরা টুলটিপ টেক্সটকে ডান পাশে দেখানোর জন্য left:105% ব্যবহার করেছি এবং টুলটিপ টেক্সটকে হোভারএবল টেক্সটের মাঝামাঝি দেখানোর জন্য top:-5px ব্যবহার করেছি।

আপনি যদি টুলটিপ টেক্সটের প্যাডিংয়ের ভ্যালু বাড়ান অথবা কমান তাহলে, top প্রোপার্টির ভ্যালুতেও একই মান ব্যবহার করতে হবে। একই মান ব্যবহার না করলে টুলটিপ টেক্সট মাঝামাঝি থাকবে না।

kt_satt_skill_example_id=1145

উপরেরদিকে টুলটিপ

যদি আপনি টুলটিপকে উপরে দেখাতে চান তাহলে bottom: 100% ব্যবহার করতে হবে এবং আমরা margin-left: -60px ব্যবহার করেছি টুলটিপ টেক্সটকে মাঝামাঝি দেখানোর জন্য। -৬০ পিক্সেল ব্যবহার করার কারণ টুলটিপ টেক্সটের প্রস্থ ১২০ পিক্সেল, আমরা এর প্রস্থের অর্ধেক নিয়েছি।

আপনি যদি টুলটিপ টেক্সটের প্রস্থ ১০০ পিক্সেল সেট করেন তাহলে মার্জিন সেট করতে হবে -৫০ পিক্সেল।

kt_satt_skill_example_id=1147

নিচেরদিকে টু্লটিপ

টুলটিপ টেক্সটকে নিচেরদিকে দেখাতে চাইলে আপনাকে bottom: 100% এর পরিবর্তে top: 100% ব্যবহার করতে হবেঃ

kt_satt_skill_example_id=1149

টুলটিপে অ্যাঁরোর ব্যবহার

নিচেরদিকে অ্যাঁরো

আমরা অ্যাঁরোকে নিচেরদিকে রাখার জন্য top: 100% ব্যবহার করেছি এবং left: 50% ব্যবহার করে অ্যাঁরোকে মাঝামাঝি নিয়ে এসেছি। border-width: 5px দ্বারা অ্যাঁরোর সাইজ নির্ধারণ করা হয়েছে, অ্যাঁরোর সাইজ নির্ধারণ করার পর একে মাঝামাঝি রাখার জন্য margin-left: -5px ব্যবহার করেছি।

লক্ষণীয় বিষয় হচ্ছে উভয় প্রোপার্টির মান সমানভাবে দিতে হবে, ১০পিক্সেল বর্ডার দিলে মার্জিনও -১০পিক্সেল ব্যবহার করতে হবে। border-color: black transparent transparent transparent; সেট করতে হবে।

kt_satt_skill_example_id=1150

উপরেরদিকে অ্যাঁরো

উপরের দিকে অ্যাঁরো দেখানোর জন্য top: 100% এর পরিবর্তে bottom: 100% ব্যবহার করতে হবে এবং border-color: transparent transparent black transparent; সেট করতে হবে।

kt_satt_skill_example_id=1153

বামদিকে অ্যাঁরো

বামদিকে অ্যাঁরো দেখানোর জন্য top: 50%, right: 100% এবং border-color: transparent black transparent transparent ব্যবহার করতে হবে।

kt_satt_skill_example_id=1156

ডানদিকে অ্যাঁরো

বামদিকে অ্যাঁরো দেখানোর জন্য top: 50%, left: 100% এবং border-color: transparent transparent transparent black ব্যবহার করতে হবে।

kt_satt_skill_example_id=1161

টুলটিপ এনিমেশন

টুলটিপ টেক্সটে এনিমেশন যোগ করার পদ্ধতি হচ্ছে transition প্রোপার্টি ও opacity প্রোপার্টির ব্যবহারঃ

kt_satt_skill_example_id=1163